<template>
<div class="rank" ref='rank'>
  <scroll v-if='topList.length > 0'  ref="scroll" class='top-list'>
    <ul>
      <li @click='selectItem(item)' class='item' v-for='item in this.topList'>
        <div class="rank-img">
          <img class='img' v-lazy="item.picUrl" alt="排行图片" >
        </div>
        <div class="rank-title">
          <ul class='rank-title-list'>
            <li class='title-item' v-for='(song, index) in item.songList'>
              <span>{{index + 1}}</span>
              <span>{{song.songname}}-{{song.singername}}</span>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </scroll>
    <router-view></router-view>
</div>
</template>
<script>
  import { mapMutations } from 'vuex';
  import Scroll from '@/base/scroll';
  import SongList from '@/base/song-list';
  import { getTopList } from '@/api/rank';
  import { playlistMixin } from '@/common/js/mixin';

  const PLAYER_HEIGHT = 60;

  export default {
    name: 'rank',
    data() {
      return {
        topList: [],
      };
    },
    methods: {
      // mixin
      handlePlayList(list) {
        if (list.length > 0) {
          this.$refs.rank.style.bottom = `${PLAYER_HEIGHT}px`;
        } else {
          this.$refs.rank.style.bottom = 0;
        }
        this.$refs.scroll && this.$refs.scroll.refresh();
      },
      selectItem(item) {
        this.$router.push(`/rank/${item.id}`);
        this.SET_TOP_LIST(item);
      },
      _getTopList() {
        getTopList().then((res) => {
          this.topList = res.data.topList;
        });
      },
      ...mapMutations(['SET_TOP_LIST']),
    },
    created() {
      this._getTopList();
    },
    components: {
      Scroll,
      SongList,
    },
    mixins: [playlistMixin],
  };
</script>
<style lang='stylus' scoped>
@import '~styl/var'
@import '~styl/mixin'
.rank
  position fixed
  top 88px
  width 100%
  bottom 0
  background $color-background
  .top-list
    overflow hidden
    .item
      display flex
      margin 0 20px
      padding-top 20px
      height 100px
      font-size 0
      &:last-child
        padding-bottom 20px
      .rank-img
        flex-basis 100px
        width 100px
        height 100px
        .img
          display inline-block
          width 100%
      .rank-title
        flex 1
        overflow hidden
        .rank-title-list
          display flex
          flex-direction column
          justify-content center
          height 100%
          padding 0 20px
          font-size $font-size-small
          color $color-text-d
          background $color-highlight-background
          .title-item
            no-wrap()
            line-height 26px
</style>
